<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/MarkItUp.Master" 
Inherits="System.Web.Mvc.ViewPage<List<Wikey.Entity.Role>>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="main" runat="server">

    <h2>Roles</h2>
      <input type="checkbox" id="RolesCheck" />
      <ul id="roles">
      <% if(ViewData.Model != null){ foreach(var role in ViewData.Model) {%>
        <li>
          <input type="hidden" value="<%=role.Id %>" class="roleId" />
          <input type="checkbox" id="ch-<%=role.Id %>" />
          <div style='display:inline'><%=role.Name %></div>
        </li>
      <%}} %>
    </ul>
    <div id="newrole">
      <input type="text" id="rolename" />
      <a href="javascript:AddRole()">Add Role</a>
    </div>
    <script type="text/javascript">
      function AddRole() {
        $.post(serverBase + "Account/Role", { id: 0, name: $("#rolename").val() }, function(response) {
          var resultData = eval("(" + response + ")");
          if (resultData.Success === true) {
            var rolesString = '';
            
            $(resultData.NewRole).each(function(index, item) {
              $("#roles").append(
                $('<li><input type="checkbox" id="ch-'+item.Id+'" /><input type="hidden" value="' + item.Id + '" class="roleId" /></li>')
                  .append(
                    $("<div style='display:inline'>" + item.Name + "</div>")//
                    .bind('dblclick', function() {
                  EditAction(this);
                })).effect('highlight', 1500));
              });
          }
          else {
            alert("Error in save");
          }
        });


      }

      function BindItems() {
        $("#roles").find("li div").each(function(index, item) {
          $(this).bind('dblclick', function() {
            EditAction(this);
            return false;
          });
        });
      }
      
      

      function EditAction(ref) {
        var exText = $(ref).text();
        var id = $(ref).parent().find("input[type='hidden']").val();
        $(ref).text('');
        var mainParent = $(ref).parent();

        var editBox = $("<div class='edit-op' style='display:inline'></div>");
        mainParent.append(editBox);

        editBox.append(" <input type='text' value='" + exText + "' />")
                    .append($("<a href='javascript:void(0);'> Save </a>").click(function() {
                      SaveRole(editBox);
                    }))
                    .append($("<a href='javascript:void(0);'> Cancel </a>").click(function() {
                      CancelSaveRole(editBox, exText);
                    }));

                    $(ref).parent().append(editBox)
      }
      function SaveRole(editBox) {
      
        var id = editBox.parent().find("input[type='hidden']").val();
        var value = editBox.parent().find("input[type='text']").val();
        
        editBox.append("<img src='" + serverBase + "/Content/loading.gif'/>");
        
        $.post(serverBase + "Account/Role/", { id: id, name: value }, function(response) {
          editBox.parent().find("div").text(value);
          editBox.remove();  
        });
      }
      function CancelSaveRole(editBox, value) {
        
        row = editBox.parent();
        editBox.remove();
        row.find("div").text(value);
      }
      
      $(document).ready(function() {
        BindItems();
        BindCheckAll();
      });
      function BindCheckAll() {
        $("#RolesCheck").change(function(item) {
          $("#roles li input[type='checkbox']").each(function(idx, item) {
            $(this).attr("checked",$("#RolesCheck").attr("checked")) ;
          });
        });
      }
      </script>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">
</asp:Content>
